<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/jquery-confirm.min.css">
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				/*position: absolute;*/
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			.mui-content {
				background-image: url(images/loginbackground.png) !important;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				text-align: center;
			}
			
			.logo-div {
				text-align: center;
			}
			
			.logo-div img {
				width: 26%;
				margin-top: 11vh;
			}
			
			.logo-div h3 {
				color: white;
				letter-spacing: 0.3em;
				font-weight: initial;
			}
			
			.mui-input-row {
				position: relative;
				width: 80%;
				margin-left: 10%;
				margin-bottom: 7.5vw;
			}
			
			.loginform {
				text-align: center;
			}
			
			.logincenterdiv,
			.registcenterdiv {
				width: 75vw;
				margin-top: 20px;
				margin-left: 12.5vw;
				border-radius: 5px;
				border: none;
				background: rgba(255, 255, 255, 0.56)!important;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.5)!important;
			}
			
			.logincenterdiv {
				position: relative;
				height: 66vw;
				padding-top: 10vw;
			}
			
			.mui-input-group {
				background-color: transparent;
			}
			
			.mui-icon {
				position: absolute;
				left: 0；z-index:5;
				font-size: 29px;
				color: white;
				line-height: 41px;
				margin-left: 5px;
			}
			
			.left-input {
				box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) inset!important;
				padding-left: 50px !important;
				/*border:2px solid !important;
				border-color: white !important;*/
				border-radius: 5px !important;
			}
			
			.mui-btn {
				width: 100% !important;
				border-radius: 10px !important;
				border: 1px solid !important;
				border-color: rgb(122, 220, 242) !important;
			}
			
			.mui-btn-primary {
				background-color: rgb(112, 210, 241) !important;
			}
			
			.mui-input-row .mui-input-clear~.mui-icon-clear,
			.mui-input-row .mui-input-password~.mui-icon-eye,
			.mui-input-row .mui-input-speech~.mui-icon-speech {
				top: 0
			}
			
			.mui-input-group .mui-input-row:after,
			.mui-input-group .mui-input-row:before {
				background: none;
			}
			
			#reg {
				color: #fff!important;
				background: none;
				border: none!important;
			}
			
			.login_btn_wk {
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 6px rgba(158, 133, 248, 0.8)!important;
				border-radius: 5px !important;
				background: #6fd1f1 !important;
			}
			
			.login_btn_wk #login {
				background: none!important;
				border: none!important
			}
			
			.jsn {
				position: absolute;
				width: 12px;
				height: 12px;
				background: url(images/jsn.png) no-repeat;
				background-size: 100% auto;
				background-position: center;
			}
			
			.jsn1,
			.jsn2 {
				top: 10px;
			}
			
			.jsn3,
			.jsn4 {
				bottom: 10px;
			}
			
			.jsn1,
			.jsn3 {
				left: 10px;
			}
			
			.jsn2,
			.jsn4 {
				right: 10px
			}
			
			.mui-input-group:before,
			.mui-input-group:after {
				background: none;
			}
			
			.fangdenglu3 {
				width: 70%;
				margin: 0 auto;
				background: url(images/regist3_line.png) no-repeat;
				background-position: center;
				background-size: 100% auto;
				font-size: 0;
				padding-top: 3%
			}
			
			.fangdenglu3 img {
				width: 15%;
				margin: 0 4.2%;
			}
		</style>

	</head>

	<body>
		<div class="mui-content">
			<div class="logo-div">
				<img src="images/loginLogo.png">
				<h3 id="app-name">智能水族馆</h3>
			</div>

			<div id='login-form' class="mui-input-group loginform">
				<div class="logincenterdiv">

					<div class="mui-input-row">
						<span class="mui-icon mui-icon-person"></span>
						<input id='account' type="text" class="mui-input-clear mui-input left-input" placeholder="请输入用户名">
					</div>
					<div class="mui-input-row">
						<span class="mui-icon mui-icon-locked"></span>
						<input id='password' type="password" class="mui-input-clear mui-input-password left-input" placeholder="请输入密码">
					</div>
					<div class="mui-input-row login_btn_wk">
						<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
					</div>

					<!--无意义的金属纽-->
					<i class="jsn jsn1"></i><i class="jsn jsn2"></i><i class="jsn jsn3"></i><i class="jsn jsn4"></i>

				</div>
			</div>
			<div class="mui-input-group">
				<div class="mui-input-row registcenterdiv">
					<button id='reg' class="mui-btn mui-btn-block mui-btn-info">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
				</div>
			</div>
			<!--<div class="mui-content-padded oauth-area">
				<div class="fangdenglu3">
					<img src="images/btn3_regist_04.png" alt="微信" />
					<img src="images/btn3_regist_06.png" alt="qq" />
					<img src="images/btn3_regist_08.png" alt="新浪" />
				</div>-->
			<!--</div>-->
		</div>
		<script src="js/mui.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script src="js/xmpp.js"></script>
		<script type="text/javascript" src="libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="js/jquery-confirm.min.js"></script>
		<script type="text/javascript" src="libs/jquery.i18n.properties.min.js"></script>
		<script type="text/javascript" src="js/notification.js" ></script>
		<script src="js/update.js"></script>
		<script>
			(function($, doc) {
				//				$.init({
				//					statusBarBackground: '#9966ff'
				//				});

				$.plusReady(function() {
					//alert(plus.os.language);
					//plus.navigator.setStatusBarBackground("#9966ff");
					plus.navigator.setStatusBarStyle("dark");
					plus.screen.lockOrientation("portrait-primary");
					var settings = app.getSettings();
					var state = app.getState();
					var mainPag = null;
					var main_loaded_flag = false;

					//					jQuery("#account").val(app.tempUserName());
					var loadMainPage = function() {
						mainPage = plus.webview.getWebviewById("main");

						if(!mainPage) {
							mainPage = $.preload({
								"id": 'main',
								"url": 'main.html'
							});
						} else {
							main_loaded_flag = true;
						}

						mainPage.addEventListener("loaded", function() {
							main_loaded_flag = true;
						});
					};
					var toMain = function() {
						//console.log('show main');
						//使用定时器的原因：
						//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
						var id = setInterval(function() {
							if(main_loaded_flag) {
								clearInterval(id);
								$.fire(mainPage, 'show', null);
								mainPage.show("pop-in");
							} else {
								loadMainPage();
							}
						}, 20);
					};
					//检查 "登录状态/锁屏状态" 开始
					if(settings.autoLogin && settings.gestures) { //&& state.token
						$.openWindow({
							url: 'unlock.html',
							id: 'unlock',
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
					};

					if(settings.autoLogin && state.token) {
						//						alert("login by token");
						//						alert(state.token);
						app.loginByToken(state.token, function(err) {
							//alert("callback");
							if(err) {
								//alert(err);
								console.log(err);
								plus.nativeUI.toast(err);
								return;
							}
							//alert("login by token success");
							plus.nativeUI.toast("login by token!");
							plus.xmpp.login(state.account, state.password); //插件调用
							toMain();
						});
					}
					//					else if(settings.autoLogin && state.token) {
					//						toMain();
					//					} 
					//					else {
					//						app.setState(null);
					//						//第三方登录
					//						var authBtns = ['qihoo', 'weixin', 'sinaweibo', 'qq']; //配置业务支持的第三方登录
					//						var auths = {};
					//						var oauthArea = doc.querySelector('.oauth-area');
					//						plus.oauth.getServices(function(services) {
					//							for(var i in services) {
					//								var service = services[i];
					//								auths[service.id] = service;
					//								if(~authBtns.indexOf(service.id)) {
					//									var isInstalled = app.isInstalled(service.id);
					//									var btn = document.createElement('div');
					//									//如果微信未安装，则为不启用状态
					//									btn.setAttribute('class', 'oauth-btn' + (!isInstalled && service.id === 'weixin' ? (' disabled') : ''));
					//									btn.authId = service.id;
					//									btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
					//									oauthArea.appendChild(btn);
					//								}
					//							}
					//							$(oauthArea).on('tap', '.oauth-btn', function() {
					//								if(this.classList.contains('disabled')) {
					//									plus.nativeUI.toast('您尚未安装微信客户端');
					//									return;
					//								}
					//								var auth = auths[this.authId];
					//								var waiting = plus.nativeUI.showWaiting();
					//								auth.login(function() {
					//									waiting.close();
					//									plus.nativeUI.toast("登录认证成功");
					//									auth.getUserInfo(function() {
					//										plus.nativeUI.toast("获取用户信息成功");
					//										var name = auth.userInfo.nickname || auth.userInfo.name;
					//										app.createState(name, function() {
					//											toMain();
					//										});
					//									}, function(e) {
					//										plus.nativeUI.toast("获取用户信息失败：" + e.message);
					//									});
					//								}, function(e) {
					//									waiting.close();
					//									plus.nativeUI.toast("登录认证失败：" + e.message);
					//								});
					//							});
					//						}, function(e) {
					//							oauthArea.style.display = 'none';
					//							plus.nativeUI.toast("获取登录认证失败：" + e.message);
					//						});
					//					}
					// close splash
					setTimeout(function() {
						//关闭 splash
						plus.navigator.closeSplashscreen();
					}, 600);
					//检查 "登录状态/锁屏状态" 结束
					var loginButton = doc.getElementById('login');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					//var autoLoginButton = doc.getElementById("autoLogin");
					var regButton = doc.getElementById('reg');
					//					var forgetButton = doc.getElementById('forgetPassword');
					loginButton.addEventListener('tap', function(event) {
						var loginInfo = {
							account: accountBox.value,
							password: passwordBox.value
						};
						//alert("login");
						//debugger;
						app.login(loginInfo, function(err) {
							if(err) {
								console.log(err);
								plus.nativeUI.toast(err);
								return;
							}

							plus.xmpp.login(loginInfo.account, loginInfo.password); //插件调用
							toMain();
						});
					});
					$.enterfocus('#login-form input', function() {
						$.trigger(loginButton, 'tap');
					});
					//autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
					//autoLoginButton.addEventListener('toggle', function(event) {
					//setTimeout(function() {
					//	var isActive = event.detail.isActive;
					//	settings.autoLogin = isActive;
					//	app.setSettings(settings);
					//}, 50);
					//}, false);
					regButton.addEventListener('tap', function(event) {
						window.location.href = "reg.html";
						return false;
						//						$.openWindow({
						//							url: 'reg.html',
						//							id: 'reg',
						//							preload: true,
						//							show: {
						//								aniShow: 'pop-in'
						//							},
						//							styles: {
						//								popGesture: 'hide'
						//							},
						//							waiting: {
						//								autoShow: false
						//							}
						//						});
					}, false);
					//					forgetButton.addEventListener('tap', function(event) {
					//						$.openWindow({
					//							url: 'forget_password.html',
					//							id: 'forget_password',
					//							preload: true,
					//							show: {
					//								aniShow: 'pop-in'
					//							},
					//							styles: {
					//								popGesture: 'hide'
					//							},
					//							waiting: {
					//								autoShow: false
					//							}
					//						});
					//					}, false);
					//
					window.addEventListener('resize', function() {
						//oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
					}, false);
					//
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if(backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
					//					alert(plus.os.language);
					//					alert(app.getLanguage());
					if(app.getLanguage() == "en") {
						jQuery.i18n.properties({
							name: 'Messages',
							path: 'bundle/',
							mode: 'both',
							language: app.getLanguage(),
							async: true,
							callback: function() {
								jQuery('#app-name').html(app_name);
								jQuery('#account').attr('placeholder', account);
								jQuery('#password').attr('placeholder', password);
								jQuery('#login').html(login);
								jQuery('#reg').html(reg);

								// Accessing a simple value through the map
								//					jQuery.i18n.prop('msg_hello');
								//					// Accessing a value with placeholders through the map
								//					jQuery.i18n.prop('msg_complex', 'John');
								//
								//					// Accessing a simple value through a JS variable
								//					alert(msg_hello + ' ' + msg_world);
								//					// Accessing a value with placeholders through a JS function
								//					alert(msg_complex('John'));
							}
						});
					}

				});
			}(mui, document));
		</script>
	</body>

</html>